<template>
  <div>
    <!-- 添加部门对话框 -->
    <el-form
      ref="diaForm"
      :rules="rules"
      :model="form"
      style="padding: 20px 50px"
    >
      <el-form-item prop="name" label="部门名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="code" label="部门编码" :label-width="formLabelWidth">
        <el-input v-model="form.code" autocomplete="off" />
      </el-form-item>
      <el-form-item
        label="部门负责人"
        :label-width="formLabelWidth"
        prop="manager"
      >
        <el-select
          v-model="form.manager"
          style="width: 100%"
          placeholder="请选择活动区域"
        >
          <el-option
            v-for="opt in managerList"
            :key="opt.id"
            :label="opt.username"
            :value="opt.id"
          /> </el-select></el-form-item>
      <el-form-item
        label="部门介绍"
        :label-width="formLabelWidth"
        prop="introduce"
      >
        <el-input v-model="form.introduce" type="textarea" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitHandle">确 定</el-button>
    </div>
    <!-- 添加部门对话框 -->
  </div>
</template>

<script>
import { getEmployeeSimple } from '@/api/employees'
import { addDepartments, updateDepartments } from '@/api/department'
export default {
  name: 'VueAdminTemplateMasterDepdia',
  props: {
    pid: {
      type: [String, Number],
      default: ''
    },
    dialogFormVisible: {
      type: Boolean
    },
    isEdit: {
      type: Boolean
    },
    row: {
      type: Object,
      default: () => {} // 复杂数据类型需要使用函数返回
    }
  },
  data() {
    return {
      form: {
        code: '',
        introduce: '',
        manager: '',
        name: '',
        pid: ''
      },
      managerList: [],

      formLabelWidth: '120px',

      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '请输入部门负责人', trigger: 'change' },
          {
            min: 1,
            max: 55,
            message: '长度在 1 到 15 个字符',
            trigger: 'change'
          }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 1, max: 25, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    isEdit: {
      handler(newVal) {
        // console.log('111')
        if (newVal) {
          //  2-4-2 子组件：根据isEdit===true=>将传过来的数据赋值给form表单对象

          // this.form = this.row

          // 使用深拷贝，让数据独立。避免对话框的数据影响页面的数据
          this.form = JSON.parse(JSON.stringify(this.row)) // id====当前点击行的id
        }
      },
      immediate: true // 进来就立即执行
      // deep: true, //深度监听
    }
  },
  created() {
    /* 获取部门负责人 */
    this.getManager()
  },
  mounted() {},

  methods: {
    /* 关闭对话框 */
    cancel() {
      // this.dialogFormVisible = false
      // this.$emit("update:dialogFormVisible", false);

      /* 子向父传值,触发父组件的 handleDia 事件 */
      // this.$emit('handleDia')

      // 关键字update:与.sync    实现父子组件的双向绑定
      this.$emit('update:dialogFormVisible', false)
      this.resetForm()
    },
    resetForm() {
      /* 表单重置 */
      this.$refs['diaForm'].resetFields()
      // this.form = {
      //   code: "",
      //   introduce: "",
      //   manager: "",
      //   name: "",
      //   pid: "",
      // };
    },
    async getManager() {
      const { data } = await getEmployeeSimple()
      this.managerList = data
    },
    /* 点击对话框中的确认按钮 */
    submitHandle() {
      // 8-0 兜底校验
      // 通过  $refs  获取ref属性为 diaForm 的表单
      this.$refs.diaForm.validate(async(valid) => {
        if (valid) {
          // 校验成功 8-2 调用api接口函数
          this.form.pid = this.pid
          // const res = await addDepartments(this.form)
          // console.log(res, 5)
          // if (res.success) {
          //   /* 关闭对话框 */
          //   this.cancel()
          //   /* 子向父传值 */
          //   this.$emit('handleDia')
          // }
          this.isEdit ? this.doEdit() : this.doAdd()
        }
      })
    },

    /* 添加部门 */
    async doAdd() {
      const res = await addDepartments(this.form)
      // console.log(res, 5);
      if (res.success) {
        /* 关闭对话框 */
        this.cancel()
        /* 刷新页面 8-3 成功后需要刷新页面 */
        // this.getDepart();
        /* 子向父传值 */
        this.$emit('handleDia')
      }
    },
    /* 编辑部门 */
    async doEdit() {
      // console.log("doEdit");
      /*
      步骤分析：
      1-封装api接口函数
      2-调用
      3-成功后==关闭对话框
      */
      // console.log(this.form, 1111)
      const res = await updateDepartments(this.form)
      // console.log(res, 5);
      if (res.success) {
        /* 关闭对话框 */
        this.cancel()
        /* 刷新页面 8-3 成功后需要刷新页面 */
        // this.getDepart();
        /* 子向父传值 */
        this.$emit('handleDia')
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
